<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/static/css/httpchat/font_Icon/iconfont.css">

    <script src="/static/libs/jquery/jquery-3.6.1.min.js"></script>
    <style>
        .userlist li {
            background: rgb(0 0 0 / 5%);
            text-align: left;
            padding: 5px;
            height: 49px;
            /*line-height: 30px;*/
            font-size: 16px;
            border-bottom: 1px solid rgb(0 0 0 / 5%);
        }

        .userlist li img {
            width: 40px;
            height: 40px;
            padding-right: 5px;
        }

        .message-num {
            right: 2px;
        }

        .ChatInfoName {
            height: 50px;
            border-bottom: 1px solid #D9D9D9;
            line-height: 50px;
            font-size: 16px;
            padding: 0 10px;
        }

        .chatBox-content {
            height: 498px !important;
            width: 100%;
        }

        .chatBox-content-demo {
            width: 100%;
            height: 370px !important;
            overflow-y: scroll;
        }

        .div-textarea {
            width: 490px !important;
            /*min-height: 20px;*/
            height: 100px;
            _height: 120px;
            padding: 3px;
            outline: 0;
            background: #fff;
            font-size: 14px;
            line-height: 20px;
            word-wrap: break-word;
            overflow-x: hidden;
            overflow-y: auto;
            user-modify: read-write-plaintext-only;
            /*纯文本*/
            -webkit-user-modify: read-write-plaintext-only;
            -moz-user-modify: read-write-plaintext-only;
        }

        .div-textarea:focus {
            box-shadow: 0 0 15px rgba(82, 168, 236, 0.6);
        }

        .clearfloat:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearfloat {
            zoom: 1;
            margin: 10px 10px;
        }

        .clearfloat .right {
            float: right;
        }

        .author-name {
            text-align: center;
            margin: 15px 0 5px 0;
            color: #888;
        }

        .clearfloat .chat-message {
            max-width: 252px;
            text-align: left;
            padding: 8px 12px;
            border-radius: 6px;
            word-wrap: break-word;
            display: inline-block;
            position: relative;
        }


        .clearfloat .left .chat-message {
            background: #D9D9D9;
            min-height: 36px;
        }

        .clearfloat .left .chat-message:before {
            position: absolute;
            content: "";
            top: 8px;
            left: -6px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-right: 10px solid #D9D9D9;
        }

        .clearfloat .right {
            text-align: right;
        }

        .clearfloat .right .chat-message {
            background: #8c85e6;
            color: #fff;
            text-align: left;
            min-height: 36px;
        }

        .clearfloat .right .chat-message:before {
            position: absolute;
            content: "";
            top: 8px;
            right: -6px;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #8c85e6;
        }

        .clearfloat .chat-avatars {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #eee;
            vertical-align: top;
            overflow: hidden;
        }

        .clearfloat .chat-avatars>img {
            width: 30px;
            height: 30px;
        }

        .clearfloat .left .chat-avatars {
            margin-right: 10px;
        }

        .clearfloat .right .chat-avatars {
            margin-left: 10px;
        }

        .chatBox-send {
            width: 100%;
            padding: 10px 5px;
            background: #eee;
            border-top: 1px #D0D0D0 solid;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .chatBox-send>div {
            float: left;
        }

        .chatBox-send>div:nth-of-type(2) {
            font-size: 0;
        }

        .chatBox-send>div button {
            padding: 1px 5px;
            margin-left: 3px;
        }

        .chatBox-send>div label {
            padding: 1px 5px;
            margin-left: 3px;
        }

        #chat-biaoqing {
            position: relative;

        }

        .hidden {
            display: none;
        }

        .biaoqing-photo {
            width: 200px;
            height: 160px;
            background: #ffffff;
            position: absolute;
            top: -160px;
            right: 40px;
            text-align: left;
            border-radius: 5px;
            border: solid 1px #c5c5c5;
            display: none;
        }

        .biaoqing-photo::before {
            content: '';
            position: absolute;
            border-top: solid 7px #c5c5c5;
            border-left: solid 9px transparent;
            border-right: solid 9px transparent;
            bottom: -7px;
            right: 36px;
        }

        .biaoqing-photo::after {
            content: '';
            position: absolute;
            border-top: solid 7px #fff;
            border-left: solid 10px transparent;
            border-right: solid 10px transparent;
            bottom: -5px;
            right: 35px;
        }

        .biaoqing-photo>ul {
            margin: 0;
            width: 200px;
            height: 160px;
            padding: 3px 2px;
            list-style: none;
        }

        .biaoqing-photo>ul>li {
            float: left;
            height: 30px;
            margin-left: 2px;
        }

        .emoji-picker-image {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url(/static/httpchat/img/bqxtb01.png) no-repeat;
            background-size: 200px auto;
            cursor: pointer;
        }

        .biaoqing-photo>ul>li span.emoji-picker-image:hover {
            border: solid 1px #f5f5f5;
        }

        .chat-message img {
            width: 220px;
            height: auto;
        }

        .chat-name {
            width: 230px;
        }

        /*按钮样式*/
        .btn-default-styles {
            outline: none;
            resize: none;
            border: none;
            display: inline-block;
            padding: 5px 10px;
            margin-bottom: 0;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            background: #bbb;
            color: #fff;
            border-radius: 4px;
        }

        .btn-default-styles:focus {
            outline: none;
        }

        .btn-default-styles:hover {
            background: #c5c5c5;
            animation: anniu 1s infinite;
        }

        .btn-default-styles:active {
            box-shadow: 0 2px 3px rgba(0, 0, 0, .2) inset;
        }

        /* 设置滚动条的样式 */
        ::-webkit-scrollbar {
            width: 5px;
        }

        /* 滚动槽 */
        ::-webkit-scrollbar-track {
            border-radius: 10px;
        }

        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: #8C85E6;
            -webkit-box-shadow: #8C85E6;
        }

        ::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(175, 190, 255, 0.4);
        }

        @media all and (max-width: 768px) {
            .chatBox {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }

        @media all and (max-width: 370px) {
            .chat-name {
                width: 185px;
            }

            .chat-people>div:nth-of-type(2) {
                width: 120px;
            }

            .clearfloat .chat-message {
                max-width: 240px;
            }
        }
    </style>
</head>

<body>
    <div class="layui-fluid" style="padding: 0">
        <div class="layui-row" style="overflow: hidden;">
            <div class="layui-col-md3 layui-col-lg3 layui-col-xs3 div-user"
                style="border-right: 1px solid #b4b2b2;height: 549px;overflow-y: scroll;">
                <ul class="userlist" id="chatuser">
                    <li lay-id="1">
                        <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="">
                        <span class="chat-name">管理员</span>
                        <span class="message-num">20</span>
                    </li>
                </ul>
            </div>
            <div class="layui-col-md9 layui-col-lg9 layui-col-xs9 ">
                <div id="chatcontent">
                    <div class="ChatInfoName">这里是用户昵称</div>
                    <div>
                        <div class="chatBox-content">
                            <div class="chatBox-content-demo" id="chatBox-content-demo">


                            </div>
                        </div>
                        <div class="chatBox-send">
                            <div class="div-textarea" contenteditable="true"></div>
                            <div>
                                <button id="chat-biaoqing" class="btn-default-styles">
                                    <i class="iconfont icon-biaoqing"></i>
                                </button>
                                <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles">
                                    <input type="file" onchange="selectImg(this)"
                                        accept="image/jpg,image/jpeg,image/png" name="file" id="inputImage"
                                        class="hidden">
                                    <i class="iconfont icon-tuxiang"></i>
                                </label>
                                <button id="chat-fasong" class="btn-default-styles"><i class="iconfont icon-fasong"></i>
                                </button>
                            </div>
                            <div class="biaoqing-photo">
                                <ul>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -9px -18px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -40px -18px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -71px -18px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -102px -18px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -133px -18px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -164px -18px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -9px -52px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -40px -52px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -71px -52px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -102px -52px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -133px -52px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -164px -52px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -9px -86px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -40px -86px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -71px -86px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -102px -86px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -133px -86px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -164px -86px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -9px -120px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -40px -120px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -71px -120px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -102px -120px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -133px -120px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -164px -120px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -9px -154px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -40px -154px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -71px -154px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -102px -154px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -133px -154px;"></span></li>
                                    <li><span class="emoji-picker-image"
                                            style="background-position: -164px -154px;"></span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!--<div class="layui-fluid">-->
    <!--    ……-->
    <!--</div>-->



</body>

</html>
<script>

    var myavatars = '';
    var myDate = new Date();
    var year = myDate.getFullYear(); //获取当前年份
    var mon = myDate.getMonth() + 1; //获取当前月份
    var da = myDate.getDate(); //获取当前日
    var day = myDate.getDay(); //获取当前星期几
    var h = myDate.getHours(); //获取小时
    var m = myDate.getMinutes(); //获取分钟
    var s = myDate.getSeconds(); //获取秒
    var ms = myDate.getMilliseconds();	//获取当前毫秒数(0-999)
    var ld = myDate.toLocaleDateString();	//获取当前日期
    var msgdate = year + '-' + mon + '-' + da + ' ' + h + ':' + m + ':' + s;



    var from_id = "{$from_id}";
    var to_id = "{$to_id}";

    //进聊天页面
    $("#chatuser li").each(function () {
        $(this).click(function () {
            $("#chatuser li").css('background', 'rgb(0 0 0 / 5%)')
            $(this).css('background', '#ffffff')
            var n = $(this).index();
            to_id = $(this).attr('lay-id')
            // $(".chatBox-head-one").toggle();
            // $(".chatBox-head-two").toggle();
            // $(".chatBox-list").fadeToggle();
            // $(".chatBox-kuang").fadeToggle();

            //传名字
            $(".ChatInfoName").text($(this).children(".chat-name").eq(0).html());

            //赋值头像
            myavatars = $(this).children('img').eq(0).attr("src");
            // //传头像

            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
            // // 打开websocket
            // webSocket.onopen = function (event) {
            onOpen();
            // };
        })
    });
    // var userlist = [10009,10010,10011,10012,10013,10014,10015,10016,10017];
    /**
     0：未连接
     1：连接成功，可通讯
     2：正在关闭
     3：连接已关闭或无法打开
     */
    //创建一个webSocket 实例
    var webSocket = new WebSocket("ws://127.0.0.1:9506");
    webSocket.onerror = function (event) {
        onError(event);
    };
    // 打开websocket
    webSocket.onopen = function (event) {
        console.log('连接成功');
        onOpen(event);
    };
    //监听消息
    webSocket.onmessage = function (event) {
        // onMessage(event);
        onMessage(111);
    };
    webSocket.onclose = function (event) {
        onClose(event);
    }
    //关闭监听websocket
    function onError(event) {
        // document.getElementById("msg").innerHTML = "<p>关闭</p>";
        console.log("错误： " + event.data);
    }
    function onOpen(event) {
        // console.log("打开: "+sockState());
        var bild = '{"type":"bind","uid":"' + from_id + '"}';
        webSocket.send(bild);

        setInterval(function () {
            webSocket.send('heartbeat');    //发送内容不限，只是为了证明客户端还没关闭还在线
        }, 20000)                    //50秒发一次
    }
    function onMessage(event) {
        var massage = eval("(" + event.data + ")");
        if (massage) {
            console.log(event.data)
            //这里表示一对一聊天
            if (massage.type == 'text' && massage.mode == 'single') {
                //当前正在聊天的人  如果当前的发送对象id等于该消息来源的id，则为一个人  ，
                if (this.to_id == massage.from_id) {
                    // console.log("服务端消息:"+massage.content);
                    // $("#chatBox-content-demo").append("<div>我是" + massage.from_id + "：" + massage.content + "</div>");
                    $("#chatBox-content-demo").append("<div class=\"clearfloat\">\n" +
                        "                                <div class=\"author-name\">\n" +
                        "                                    <small class=\"chat-date\">" + massage.datetime + "</small>\n" +
                        "                                </div>\n" +
                        "                                <div class=\"left\">\n" +
                        "                                    <div class=\"chat-avatars\"><img src=\"" + myavatars + "\" alt=\"头像\"/></div>\n" +
                        "                                    <div class=\"chat-message\">" + massage.content + "</div>\n" +
                        "                                </div>\n" +
                        "                            </div>");
                    return;
                } else {
                    //不是当前聊天的人、将消息提醒发送到对应的列表，并将消息发送到对应页面
                    //在数据库请求该人的基本信息，
                }

            }
            //这里表示群聊
            if (massage.type == 'text' && massage.mode == 'group') {

                console.log(massage);
            }
        }


    }
    function onClose(event) {
        // document.getElementById("msg").innerHTML = "<p>他通讯已关闭</p>";
        console.log("关闭: " + sockState());
        webSocket.close();
    }
    function sockState() {
        var status = ['未连接', '连接成功，可通讯', '正在关闭', '连接已关闭或无法打开'];
        return status[webSocket.readyState];
    }

    function close(event) {
        webSocket.close();
    }
    document.onkeydown = keyDownSearch;
    function keyDownSearch(e) {
        // 兼容FF和IE和Opera
        var theEvent = e || window.event;
        var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code == 13) {
            //具体处理函数
            chat_fasong()
            return false;
        }
        return true;
    }


    //未读信息数量为空时
    var totalNum = $(".chat-message-num").html();
    if (totalNum == "") {
        $(".chat-message-num").css("padding", 0);
    }
    $(".message-num").each(function () {
        var wdNum = $(this).html();
        if (wdNum == "") {
            $(this).css("padding", 0);
        }
    });



    //      发送信息
    $("#chat-fasong").click(function () {
        chat_fasong()
    });
    function chat_fasong() {
        var textContent = $(".div-textarea").html().replace(/[\n\r]/g, '<br>')
        if (textContent != "") {
            //发送到服务器
            var msg1 = '{"type":"text","mode":"single","from_id":"' + from_id + '","to_id":"' + to_id + '","content":"' + textContent + '","datetime":"' + msgdate + '"}';
            webSocket.send(msg1);
            $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">" + msgdate + "</small> </div> " +
                "<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +
                "<div class=\"chat-avatars\"><img src=\"/static/httpchat/img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
            /*"/static/httpchat/img/icon01.png"*/
            //发送后清空输入框
            $(".div-textarea").html("");
            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        }
    }

    //      发送表情
    $("#chat-biaoqing").click(function () {
        $(".biaoqing-photo").toggle();
    });
    $(document).click(function () {
        $(".biaoqing-photo").css("display", "none");
    });
    $("#chat-biaoqing").click(function (event) {
        event.stopPropagation();//阻止事件
    });

    $(".emoji-picker-image").each(function () {
        $(this).click(function () {
            var bq = $(this).parent().html();
            //发送到服务器
            var msg2 = '{"type":"text","mode":"single","from_id":"' + from_id + '","to_id":"' + to_id + '","content":"' + bq + '","datetime":"' + msgdate + '"}';
            webSocket.send(msg2);
            $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">" + msgdate + "</small> </div> " +
                "<div class=\"right\"> <div class=\"chat-message\"> " + bq + " </div> " +
                "<div class=\"chat-avatars\"><img src=\"/static/httpchat/img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
            //发送后关闭表情框
            $(".biaoqing-photo").toggle();
            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        })
    });

    //      发送图片
    function selectImg(pic) {
        if (!pic.files || !pic.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var images = evt.target.result;
            var to_img = "<img src=" + images + ">";
            //发送到服务器
            var msg3 = '{"type":"text","mode":"single","from_id":"' + from_id + '","to_id":"' + to_id + '","content":"' + to_img + '","datetime":"' + msgdate + '"}';
            webSocket.send(msg3);

            $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">" + msgdate + "</small> </div> " +
                "<div class=\"right\"> <div class=\"chat-message\"><img src=" + images + "></div> " +
                "<div class=\"chat-avatars\"><img src=\"/static/httpchat/img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        };
        reader.readAsDataURL(pic.files[0]);

    }

</script>